<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<!--  外边距？所有元素具备边框，边框以外的距离，四个，上下，左右
		 margin外边距属性:一个属性值 
		 外边距问题1：行内元素： a i delete  只支持左右边距
		             布局，支持左右推动效果
					 解决方案：行转块！
					 常用margin：两个属性值
		 -->
		<style>
			span{
				width: 50%;
				border: 1px solid red;
				/* margin外边距属性:1个属性值: 上 右 下 左 */
				margin: 300px;
				/* ? 上下 左右   上下效果没有  ？ */
				/* margin外边距属性:2个属性值: 上下 左右 */
				margin: 100px 200px;
				/* margin外边距属性:3个属性值: 上  右左  下*/
				margin: 100px 200px 300px;
				/* margin外边距属性:4个属性值: 上  右  下  左*/
				margin: 100px 200px 300px 400px;
				/* 常用属性：自适应居中 */
				margin: auto;
				margin-left: 800px;
				}
				h1{
					border: 1px solid red;
					margin: 100px;
				}
				/* 外边距问题2：外边距合并问题 :
				上下元素都存在外边距，垂直以最大外边距为主，怎么解决
				推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素其中上，下外边距，重新计算
				      2.padding代替margin
				*/
				#parent{
					border: 1px solid transparent;
					width: 200px;
					height: 200px;
					background: #aaaaff;
					/* 下外边距 */
					margin-top: 30px;
					overflow: hidden;
				}
				#child{
					margin-top: 30px;
					   width: 100px;
						height: 100px;
						background: #ffaa00;
				}
		</style>
	</head>
	<body>
		
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		<hr>
		<!-- 元素：存在于框模型=外边距+边框+内边距+内容
		 有些元素默认外边距 处理方案 通配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
	</body>
</html>